<template>
	<view class="page">
		<view class="stops" style="margin: 45rpx 0;">
			<u-steps :current="current" direction="row">
				<u-steps-item v-for="(item,index) in auditList" :key="index" 
					:desc="item.createTime">
					<view slot="desc" class="styyyy">{{item.apply}}</view>
				</u-steps-item>
			</u-steps>
		</view>
		<view class="tip">
			*请如实完整填写以下资料，否则会影响您的评估结果
		</view>
<!-- 		<view class="uploaad" @click="imgShow(form.idCardImg)" v-if="form.idCardImg!=null">
			<img :src="form.idCardImg" alt="" style="width: 100%;height: 100%;">
		</view>
		<view class="uploaad" v-if="form.idCardImg==null">
			<img src="@/static/ke_hu/sfz.jpg" alt="" style="width: 100%;height: 100%;">
		</view> -->
		<view class="items" style="margin-top: 24rpx;">
			<view class="items_left">
				姓名
			</view>
			<view class="items_rght_tips">
				{{form.name}}
			</view>
		</view>
		<view class="items">
			<view class="items_left">
				身份证号
			</view>
			<view class="items_rght_tips">
				{{form.idCardNumber}}
			</view>
		</view>
		<view class="items">
			<view class="items_left">
				手机号
			</view>
			<view class="items_rght_tips">
				{{form.account}}
			</view>
		</view>
		<view class="items">
			<view class="items_left">
				现住宅地址
			</view>
			<view class="items_rght_tips">
				{{form.address}}
			</view>
		</view>
		<view class="items">
			<view class="items_left">
				学历
			</view>
			<view class="items_rght_tips">
				{{educationTips}}
			</view>
		</view>
		<view class="fenGe"></view>
		<!-- 		<view class="items">
			<view class="items_left">
				是否具有稳定工作
			</view>
			<view class="items_rght_tips">
				{{form.stableWork}}
			</view>
		</view> -->
		<view class="items">
			<view class="items_left">
				工作单位名称
			</view>
			<view class="items_rght_tips">
				{{form.workplace}}
			</view>
		</view>
		<view class="tishi" style="margin: 32rpx 0;">
			*工作单位请参照营业执照或实际单位名字填写，否则会影响审
			批结果
		</view>
		<view class="items">
			<view class="items_left">
				单位座机号
			</view>
			<view class="items_rght_tips">
				{{form.workPhone || ''}}
			</view>
		</view>
		<view class="items">
			<view class="items_left">
				是否有社保
			</view>
			<view class="items_rght_tips">
				{{sheBao}}
			</view>
		</view>
		<view class="fenGe"></view>
		<!-- 		<view class="items">
			<view class="items_left">
				是否有房贷
			</view>
			<view class="items_rght_tips">
				{{form.mortgage}}
			</view>
		</view>
		<view class="items">
			<view class="items_left">
				分期用途
			</view>
			<view class="items_rght_tips">
				{{form.stagingUse}}
			</view>
		</view> -->
		<!-- 		<view class="items">
			<view class="items_left">
				购车地
			</view>
			<view class="items_rght_tips">
				{{form.area}}
			</view>
		</view> -->
		<view class="items">
			<view class="items_left">
				经销商
			</view>
			<view class="items_rght_tips">
				{{form.dealerName}}
			</view>
		</view>
		<view class="items">
			<view class="items_left">
				车型
			</view>
			<view class="items_rght_tips">
				{{form.carTypeNum}}
			</view>
		</view>
		<view class="items">
			<view class="items_left">
				分期数
			</view>
			<view class="items_rght_tips">
				{{fenqishu}}
			</view>
		</view>
		<view class="items">
			<view class="items_left">
				费率
			</view>
			<view class="items_rght_tips">
				{{form.annualizedRate}}%
			</view>
		</view>
		<view class="items">
			<view class="items_left">
				官方指导价
			</view>
			<view class="items_rght_tips">
				{{form.carPrice}}
			</view>
		</view>
		<view class="items">
			<view class="items_left">
				分期项目
			</view>
			<view class="items_rght_tips">
				{{xiangmu}}
			</view>
		</view>
		<view class="items">
			<view class="items_left">
				经销商开票价
			</view>
			<view class="items_rght_tips">
				{{form.dealerTicketPrice || '0'}}
			</view>
		</view>
		<view class="items">
			<view class="items_left">
				客户首付金额
			</view>
			<view class="items_rght_tips">
				{{form.downPayment || '0'}}
			</view>
		</view>
		<view class="items">
			<view class="items_left">
				客户分期金额
			</view>
			<view class="items_rght_tips">
				{{form.dealerTicketPrice - form.downPayment}}
			</view>
		</view>
		
		
		<view class="items">
			<view class="items_left">
				备注
			</view>
			<view class="items_rght_tips">
				{{form.remark || '暂无备注'}}
			</view>
		</view>
		<u-button v-if="showBuChong"
			:customStyle="{border:'none',background: '#55aaff',width:'644rpx',color:'#fff',height:'90rpx',fontSize:'30rpx',borderRadius:'15rpx',marginTop:'45rpx'}"
			@click="buChongClick()">
			补充资料
		</u-button>
		<u-button v-if="showQingKuan"
			:customStyle="{border:'none',background: '#55aaff',width:'644rpx',color:'#fff',height:'90rpx',fontSize:'30rpx',borderRadius:'15rpx',marginTop:'45rpx'}"
			@click="qingkuanClick()">
			请款资料
		</u-button>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				buchongziliao: false,
				current: 0,
				id: null, //订单id
				form: {
					id: '', //申请id
					name: '', //姓名
					idCardNumber: '', //身份证
					phone: '', //新增手机号
					address: '', //新增现住宅地
					workPhone: '', //新增单位座机
					installmentNum: 0, //新增分期数
					idCardImg: null, //身份证照片
					degree: null, //学历
					workplace: '', //工作单位
					stableWork: 1, //是否有稳定工作
					clientUserId: uni.getStorageSync("clientUserId"), //当前登录人ID
					cpfSocialSecurity: 1, //是否有公积金或社保
					mortgage: 1, //房贷
					stagingUse: null, //分期用途
					areaId: null, //购车地
					dealerId: null, //经销商
					cartypeId: '', //车型
					sysUserId: '', //销售人员Id
					backHousehold: 1, //背户
					email: '', //邮箱号
					carPrice: '', //官方指导价
					remark: null,
				},
				showBuChong: false,
				showQingKuan: false,
				educationTips: '', //学历
				sheBao: '', //社保
				xiangmu: '', //分期项目
				fenqishu: '', //分期数提示
				auditList: [{
						apply: '初审中'
					},
					{
						apply: '初审通过'
					},
					{
						apply: '补充资料'
					},
					{
						apply: '终审中'
					},
					{
						apply: '终审通过'
					},
					{
						apply: '合同签署中'
					},
					{
						apply: '合同签署完成'
					},
					{
						apply: '请款中'
					},
					{
						apply: '已放款'
					},
					{
						apply: '还款中'
					},
					{
						apply: '还款完成'
					}
				], //审核记录
			}
		},
		methods: {
			addOrEdit() {
				this.addOrUpdateRemark()
			},
			// 预览图片
			imgShow(path) {
				uni.previewImage({
					urls: [path]
				})
			},
			load() {
				this.getInstallment()
			},
			//添加或修改订单备注
			async addOrUpdateRemark() {
				const res = await this.$post(`/biz/wxInstallmentRemark/addOrEdit`, {
					content: this.form.remark,
					installmentId: this.id
				})
			},
			//获取申请详情
			async getInstallment() {
				//获取练习列表数据
				const res = await this.$post(`/biz/wxInstallment/getMyInstallments`, {
					id: this.id
				})
				this.form = res.data.data
				this.dealerTips = res.data.data.dealerName
				if (this.form.degree == '0') {
					this.educationTips = '初中'
				}
				if (this.form.degree == '1') {
					this.educationTips = '高中'
				}
				if (this.form.degree == '2') {
					this.educationTips = '大专'
				}
				if (this.form.degree == '3') {
					this.educationTips = '本科及以上学历'
				}
				if (this.form.stagingUse == '0') {
					this.StagingPurposesTips = '买车'
				}
				if (this.form.stagingUse == '1') {
					this.StagingPurposesTips = '买房'
				}
				if (this.form.stagingUse == '2') {
					this.StagingPurposesTips = '其他'
				}
				if (res.data.data.cpfSocialSecurity == 0) {
					this.sheBao = '是'
				} else {
					this.sheBao = '否'
				}
				if (res.data.data.installmentNum == 0) {
					this.fenqishu = '12期'
				} else if (res.data.data.installmentNum == 1) {
					this.fenqishu = '24期'
				} else if (res.data.data.installmentNum == 2) {
					this.fenqishu = '36期'
				}
				if (res.data.data.project == 0) {
					this.xiangmu = '新车'
				} else {
					this.xiangmu = '二手车'
				}
				this.form.backHousehold = parseInt(res.data.data.backHousehold)
				this.form.stableWork = parseInt(res.data.data.stableWork)
				this.form.cpfSocialSecurity = parseInt(res.data.data.cpfSocialSecurity)
				this.form.installmentNum = parseInt(res.data.data.installmentNum)

				this.form.mortgage = parseInt(res.data.data.mortgage)
				if (res.data.data.minPrice == res.data.data.maxPrice) {
					this.form.carPrice = res.data.data.maxPrice
				} else {
					this.form.carPrice = res.data.data.minPrice + "-" + res.data.data.maxPrice
				}
				this.CarTypeTips = res.data.data.carTypeNum
				this.BuyingAcarTips = res.data.data.areaName
				this.workPhone = res.data.data.workPhone
				this.address = res.data.data.address
				this.phone = res.data.data.phone
				this.getInstallmentAudit(res.data.data)
				if (this.form.applyStatus == '2' || this.form.applyStatus == '12') {
					var role = uni.getStorageSync('roles')
					if (role && !role.includes("银行客户经理")) {
						this.showBuChong = true
					}
				}else{
					this.showBuChong = false
				}
				if (this.form.applyStatus == '17' || this.form.applyStatus == '14') {
					var role = uni.getStorageSync('roles')
					if (role && !role.includes("银行客户经理") && !role.includes("customer")) {
						this.showQingKuan = true
					}
				}else{
					this.showQingKuan = false
				}
			},
			//获取审核记录
			getInstallmentAudit(e) {
				if (e.applyStatus == 0 || e.applyStatus == 1 || e.applyStatus == 5) {
					this.current = 0
				}
				if (e.applyStatus == 10) {
					this.current = 1
				}
				if (e.applyStatus == 2 || e.applyStatus == 11 || e.applyStatus == 12) {
					this.current = 2
				}
				if (e.applyStatus == 3 || e.applyStatus == 4) {
					this.current = 3
				}
				if (e.applyStatus == 16) {
					this.current = 5
				}
				if (e.applyStatus == 13 || e.applyStatus == 14 || e.applyStatus == 17 || e.applyStatus == 6) {
					this.current = 7
				}
				if (e.applyStatus == 7) {
					this.current = 8
				}
				if (e.applyStatus == 18) {
					this.current = 9
				}
				if (e.applyStatus == 15) {
					this.current = 11
				}
				if (this.current > 1) {
					this.auditList[1].apply = "【" + e.productName + "】"
				}
				if (this.current > 1) {
					this.auditList[1].apply = "【" + e.productName + "】"
					this.auditList[1].createTime = "年化费率：" + e.annualizedRate + "\n期数：" + this.fenqishu + "\n车型：" + e
						.carTypeNum
				}
			},
			buChongClick() {
				uni.navigateTo({
					url: `/pages/ke_hu_duan/wo_de_shen_qing/bu_chong_zi_liao?id=${this.form.id}&type=1&applyStatus=${this.form.applyStatus}`
				})
			},
			qingkuanClick() {
				uni.navigateTo({
					url: `/pages/qingKuanZiLiao/qingKuangZiLiao?id=${this.form.id}&type=1&applyStatus=${this.form.applyStatus}`
				})
			},
		}
	}
</script>

<style>
	.page {
		overflow-y: auto;
		width: 100%;
		/* height: 100vh; */
		background-color: #fff;
		padding: 0 30rpx 81rpx;
		box-sizing: border-box;
	}
	.tip {
		font-size: 24rpx;
		font-family: 'PingFang SC-Regular, PingFang SC';
		font-weight: 400;
		color: #B1B1B1;
		margin-top: 24rpx;
	}

	.uploaad {
		width: 690rpx;
		height: 297rpx;
		background: #F9F9F9;
		border-radius: 15rpx 15rpx 15rpx 15rpx;
		margin-top: 32rpx;
	}

	.uploaad {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.icon {
		font-size: 108rpx;
		font-family: 'Rubik-Regular, Rubik';
		font-weight: 400;
		color: #C4C4C4;
	}

	.items {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 31rpx;
		box-sizing: border-box;
		width: 100%;
		height: 97rpx;
		border-bottom: 2rpx solid #F4F4FA;
		/* background-color: aqua; */
	}

	.items_left {
		font-size: 24rpx;
		font-family: 'PingFang SC-Regular, PingFang SC';
		font-weight: 400;
		color: #1A1824;

	}

	.fenGe {
		width: 690rpx;
		height: 15rpx;
		background: #F4F4FA;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.tishi {
		height: 66rpx;
		font-size: 24rpx;
		font-family: 'PingFang SC-Regular, PingFang SC';
		font-weight: 400;
		color: #B1B1B1;
	}

	.xie_yi {
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		height: 66rpx;
		font-size: 24rpx;
		font-family: 'PingFang SC-Regular, PingFang SC';
		font-weight: 400;
		color: #B1B1B1;
		margin: 34rpx 0 76rpx;
	}

	.items_rght_tips {
		font-size: 22rpx;
		font-family: 'PingFang SC-Regular, PingFang SC';
		font-weight: 400;
		color: #9D9D9D;
	}

	.slot-icon {
		width: 21px;
		height: 30px;
		background-color: $u-warning;
		border-radius: 100px;
		font-size: 20px;
		color: #fff;
		line-height: 30px;
		text-align: center;
	}
	.styyyy {
		color: #606266;
		font-weight: normal;
		    word-wrap: normal;
		    font-size: 13px;
		 writing-mode: vertical-rl; /* 实现文字垂直显示，其中 "rl" 表示从右向左 */
		  text-orientation: upright; /* 保证文字正立显示 */
	}
	.chfds {
		color: #000;
		color: red;
	}
</style>